<template>
	<div>
		<BreadList :list="['Home','System',{name:'TimeLine'},'Preview']"></BreadList>
		<a-card>
			<a-timeline>
				<a-timeline-item color="green" v-for="item of page.list" :key="item.id">
						<span id="timeline-title">{{item.title}}</span>  | 创建时间 {{item.createTime}}
						<div class="markdown-body" v-html="item.content"></div>
						<div>启用状态：{{item.enabled === 0 ? '未启用' : '已启用'}}</div>
						<div>版本：{{item.version}}</div>
				</a-timeline-item>
			</a-timeline>
			<a-pagination
				v-model="page.currentPage"
				simple
				:total="page.totalCount"
				:page-size="page.pageSize"
				@showSizeChange="onSizeChange"
				@change="onPageChange">
			</a-pagination>
		</a-card>
	</div>
</template>

<script>
	import {
		getTimeLineByPage
	} from '@/api/System.js'
	export default {
		name: 'TimeLinePreview',
		data () {
			return {
				page: {
					currentPage: 1, // 当前页
					pageSize: 20, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			}
		},
		created () {
			this.getList()
		},
		methods: {
			async getList () {
				const {
					data: res
				} = await getTimeLineByPage(this.page)
				console.log(res)
				if (res.code !== 20005)
					return this.$message.error('列表加载出错')
				this.page = res.data
				this.page.index = undefined
				// 渲染数据为 markdown 字符串
				let arr = this.page.list
				var MardownIt = require("markdown-it")
				var md = new MardownIt()
				arr.forEach((item, index) => {
					this.page.list[index].content =  md.render(item.content)
				})
				this.$message.success(res.msg)
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.getList()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.getList()
			},
		}
	}
</script>

<style scoped>
 #timeline-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
 }
</style>